<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>studentData</title>
    <link rel="stylesheet" href="css/stu.css">
</head>

<body>
    <p class="stu">
        <select name="" id="stuList">
            <option value="">请选择学生信息</option>
            <option value="s1">第一位学生</option>
            <option value="s2">第二位学生</option>
            <option value="s3">第三位学生</option>
        </select>
    </p>
    <div>
        <table border="1" cellpadding="10" cellspacing="0" width="80%" align="center">
            <thead>
                <tr>
                    <th colspan="8">学生信息</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>身高</td>
                    <td>体重</td>
                    <td>爱好</td>
                </tr>
                <tr>
                    <td id="name"></td>
                    <td id="age"></td>
                    <td id="height"></td>
                    <td id="weight"></td>
                    <td id="hobby"></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    //获取学生信息列表
    var stuList = document.getElementById('stuList');
    //改变学生顺序，就改变学生信息
    stuList.addEventListener('change', function () {
        //假如学生信息为空时，直接终止
        if (this.value == "") {
            return;
        }
        //创建Ajax
        var xhr = new XMLHttpRequest();
        //规定异步向服务器发送请求
        xhr.open('get', '/stu?id='+this.value, true);
        //浏览器和服务器信息同步更新
        xhr.onreadystatechange = function () {
            //判断请求是否已完成并且状态是200
            if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
                //是的话，将服务器信息传递给浏览器
                var msg = xhr.responseText;
                //将字符串转化成对象
                json = JSON.parse(msg);
                //分别赋值
                document.getElementById('name').innerHTML = json.name;
                document.getElementById('age').innerHTML = json.age;
                document.getElementById('height').innerHTML = json.height;
                document.getElementById('weight').innerHTML = json.weight;
                document.getElementById('hobby').innerHTML = json.hobby;   
                console.log(json);
            } else {
                //不是的话，就返回“数据获取失败”
                <!-- document.getElementById('main').innerHTML = "数据获取失败"; -->
            }
        }
        //将请求发送到服务器
        xhr.send();
    });
</script>

</html>